<template>
  <div class="container">
      <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
        <div class="item" v-for="(item, ind) in list" :key="ind">
              <div class="item-top">
                <img
                  :src="item.donate_avatar"
                  alt=""
                  class="avatar"
                />
               团长： {{ item.donate_nickname}}
              </div>
              <p>
                项目名称：{{item.title}}
              </p>
              <p>发起于：{{item.created_at}}</p>
              <p>状态：
                <span v-if="item.status==2" style="color:green">已支付</span>
                <span v-if="item.status==3" style="color:gray">已退款</span>
                <span v-if="item.status==4" style="color:green">已达成</span>
              </p>
            </div>
      </van-list>
  </div>
</template>

<script>
export default {
    data(){
        return{
            loading:false,
            finished:false,
            list:[],
            page:1,
            size:10,
            total:0,
        }
    },
    methods:{
        onLoad(){
          this.$api.get_earns({
            p:"w",
            api_token:localStorage.api_token
          }).then(res=>{
            this.loading =false;
            this.total = res.data.total;
            this.page = this.page+1;
            if(this.page==1){
              this.list = res.data.list;
            }else{
              this.list = [...this.list,...res.data.list];
            }
            this.finished = this.list.length===this.total;
          })
        }
    }
}
</script>

<style scoped>
.contianer{
    width:100%;
    min-height:100vh;
}
.item {
  background: #fff;
  padding: 10px 10px;
  margin-bottom: 10px;
}
.item-top {
  color: #000;
  font-size: 16px;
  vertical-align: middle;
  position: relative;
  display: flex;
}
.btn-group {
  flex: 1;
  text-align: right;
}
.btn {
  border-radius: 14px;
  padding: 5px 15px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  display: inline-block;
  background: #cc1c24;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 15px;
}
.item p,
.item .p {
  color: #333;
  font-size: 14px;
  overflow: hidden;
}
.item .date {
  display: block;
  float: right;
}
.money {
  color: #cc1c24;
}
.imgs {
  float: right;
  margin-right: -18px;
}
.imgs img {
  width: 24px;
  height: 24px;
  display: block;
  float: left;
  margin: 0 5px;
  border-radius: 50%;
  vertical-align: middle;
}
.inners {
  background: #fff;
  padding: 10px 15px;
}
.inners p {
  color: #666;
  font-size: 14px;
  margin: 0;
  line-height: 20pxs;
}
.share-btn {
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 18px;
  color: #ffffff;
  background: #cc1c24;
}
</style>